<template>
  <div ref="BarECharts" style="width: 100%;height: 100%"></div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import * as echarts from 'echarts';

const props = defineProps(['tableData'])

const BarECharts = ref(null)
onMounted(() => {

  if (BarECharts.value) {
    const Echarts = echarts.init(BarECharts.value);
    const option = {
      grid: {
        left: '5%',
        right: '5%',
        bottom: '5%',
        top: '10%',
        containLabel: true
      },
      backgroundColor: '#ffffff',
      xAxis: {
        show: false,
        type: 'value'
      },
      yAxis: [{
        type: 'category',
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: '#303133',
            fontSize: '14'
          },
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: false
        },
        data: props.tableData.map(item=>item.rank)
      }, {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          textStyle: {
            color: '#303133',
            fontSize: '14'
          },
        },
        data: props.tableData.map(item=>{
          return (item.rate * 100).toFixed(2) + '%'
        })
      }],
      series: [{
        type: 'bar',
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 0,
            color: '#419fff'
          },
        },
        barWidth: 8,
        data: props.tableData.map(item=>{
          return (item.rate * 100).toFixed(2)
        })
      },
        {
          type: 'bar',
          barWidth: 8,
          barGap: '-100%',
          data: props.tableData.map(item=>{
            return 100
          }),
          itemStyle: {
            normal: {
              color: '#E4E7ED',
              barBorderRadius: 0,
            }
          },
        },
      ]
    };
    Echarts.setOption(option);
    window.onresize = Echarts.resize
  }
})


</script>

<style lang="less" scoped>
</style>
